<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=1">
<meta name="referrer" content="never">
<meta name="robots" content="index,follow">
<link rel="shortcut icon" href="/favicon.png?v=198964">
<link rel="apple-itouch-icon" href="/favicon.png?v=198964">
<link href="/bundle/index.min.css" rel="stylesheet">
<link href="https://fonts.loli.net/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" rel="stylesheet">
<link href="https://cdn.staticfile.org/prism/1.16.0/themes/prism.min.css" rel="stylesheet">
<link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
    function ensureDate(e){return"object"!=typeof e&&(e=new Date(e)),e}function dateFormat(e,t){void 0===t&&(t=e,e=ensureDate());let n={M:(e=ensureDate(e)).getMonth()+1,d:e.getDate(),h:e.getHours(),m:e.getMinutes(),s:e.getSeconds(),q:Math.floor((e.getMonth()+3)/3),S:e.getMilliseconds()},r=new RegExp("([yMdhmsqS])+","g");return t=t.replace(r,function(t,r){let u=n[r];if(void 0!==u)return t.length>1&&(u=(u="0"+u).substring(u.length-2)),u;if("y"===r){return(e.getFullYear()+"").substring(4-t.length)}return t})}
</script>
    <meta name="keywords" content="使用 gulp 压缩 JS,Gulp,">
    <meta name="description" content="使用 gulp 压缩 JS,Gulp,">
    <meta name="author" content="江矿先森.">
    <title>使用 gulp 压缩 JS</title>
    <link href="/bundle/iconfont.css" rel="stylesheet">
    <link href="/bundle/reward.css" rel="stylesheet">
    <script src='/bundle/av.min.js'></script>
    <script src='/bundle/valine.min.js'></script>
</head>

<body>
    <article class="container">
        <header class="header-wrap asset">
    <nav class="main-nav">
        <ul class="menu vertical naive">
            <li class="menu-item"><a href="/">Home</a></li>
            <li class="menu-item"><a href="/archive.html">Archive</a></li>
            <li class="menu-item"><a href="/tag.html">Tag</a></li>
            
            <li class="menu-item"><a href="/atom.xml">RSS</a></li>
        </ul>
    </nav>
    <div class="bgs" style="background-image: url(https://pic6.58cdn.com.cn/nowater/webim/big/n_v212fe49b1d6d5492cb1def84eeff4b142.jpg);"></div>
    <div class="vertical">
        <div class="header-wrap-content inner">
            <h3 class="title">Stay before every beautiful thoughts.</h3>
            <h3 class="subtitle">Just be nice, always think twice!</h3>
        </div>
    </div>
</header>
        <article class="main article">
            <h1 class="title">使用 gulp 压缩 JS</h1>
            <section class="info">
                <span class="avatar" style="background-image: url(https://pic1.58cdn.com.cn/nowater/webim/big/n_v2a9773b605e754c8493cf53ca8f5c0d7e.jpg);"></span> <a class="name" href="javascript:;">江矿先森.</a> 
                <span class="date"><script>document.write(dateFormat( 1473132234 *1000, 'yyyy-MM-dd'))</script></span> 
                <span class="tags"><a class="tages" href="/tag/Gulp/index.html">Gulp</a></span>
            </section>
            <article class="content"><p>压缩 js 代码可降低 js 文件大小，提高页面打开速度。在不利用 gulp 时我们需要通过各种工具手动完成压缩工作。</p>

<p>所有的 gulp 代码编写都可以看做是将规律转化为代码的过程。</p>

<hr />

<p>找到 <code>js/</code> 目录下的所有 js 文件，压缩它们，将压缩后的文件存放在 <code>dist/js/</code> 目录下。</p>

<h2>gulp 代码</h2>

<p><strong>建议</strong>：你可以只阅读下面的代码与注释或同时阅读代码解释</p>

<p>gulp 的所有配置代码都写在 <code>gulpfile.js</code> 文件。</p>

<p><strong>一、新建一个 <code>gulpfile.js</code> 文件</strong></p>

<pre><code>chapter2
└── gulpfile.js
</code></pre>

<hr />

<p><strong>二、在 <code>gulpfile.js</code> 中编写代码</strong></p>

<pre><code class="language-js">// 获取 gulp
var gulp = require('gulp')
</code></pre>

<blockquote>
<p><code>require()</code> 是 node （CommonJS）中获取模块的语法。</p>

<p>在 gulp 中你只需要理解 <code>require()</code> 可以获取模块。</p>
</blockquote>

<hr />

<p><strong>三、获取 <code>gulp-uglify</code> 组件</strong></p>

<pre><code class="language-js">// 获取 uglify 模块（用于压缩 JS）
var uglify = require('gulp-uglify')
</code></pre>

<hr />

<p><strong>四、创建压缩任务</strong></p>

<pre><code class="language-js">// 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('script', function() {
    // 1. 找到文件
    gulp.src('js/*.js')
    // 2. 压缩文件
        .pipe(uglify())
    // 3. 另存压缩后的文件
        .pipe(gulp.dest('dist/js'))
})
</code></pre>

<ul>
<li><code>gulp.task(name, fn)</code> - 定义任务，第一个参数是任务名，第二个参数是任务内容。</li>
<li><code>gulp.src(path)</code> - 选择文件，传入参数是文件路径。</li>
<li><code>gulp.dest(path)</code> - 输出文件</li>
<li><code>gulp.pipe()</code> - 管道，你可以暂时将 pipe 理解为将操作加入执行队列</li>
</ul>

<p>参考：<a href="http://www.gulpjs.com.cn/docs/api/">gulp API文档</a></p>

<hr />

<p><strong>五、跳转至 <code>gulpfile.js</code> 所在目录</strong></p>

<p>打开命令行使用 <code>cd</code> 命令跳转至 <code>gulpfile.js</code> 文件所在目录。</p>

<p>例如我的 <code>gulpfile.js</code> 文件保存在 <code>C:\gulp-book\demo\chapter2\gulpfile.js</code>。</p>

<p>那么就需要在命令行输入</p>

<pre><code>cd C:\gulp-book\demo\chapter2
</code></pre>

<blockquote>
<p>Mac 用户可使用 <code>cd Documents/gulp-book/demo/chapter2/</code> 跳转</p>
</blockquote>

<hr />

<p><strong>六、使用命令行运行 script 任务</strong></p>

<p>在控制台输入 <code>gulp 任务名</code> 可运行任务，此处我们输入 <code>gulp script</code> 回车。</p>

<p>注意：输入 <code>gulp script</code> 后命令行将会提示错误信息</p>

<pre><code>// 在命令行输入
gulp script

Error: Cannot find module 'gulp-uglify'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
</code></pre>

<p><code>Cannot find module 'gulp-uglify'</code> 没有找到 <code>gulp-uglify</code> 模块。</p>

<hr />

<p><strong>七、安装 <code>gulp-uglify</code> 模块</strong></p>

<p>因为我们并没有安装 <code>gulp-uglify</code> 模块到本地，所以找不到此模块。</p>

<p>使用 npm 安装 <code>gulp-uglify</code> 到本地</p>

<pre><code>npm install gulp-uglify
</code></pre>

<p>安装成功后你会看到如下信息：</p>

<pre><code>gulp-uglify@1.1.0 node_modules/gulp-uglify
├── deepmerge@0.2.7
├── uglify-js@2.4.16 (uglify-to-browserify@1.0.2, async@0.2.10, source-map@0.1.34, optimist@0.3.7)
├── vinyl-sourcemaps-apply@0.1.4 (source-map@0.1.43)
├── through2@0.6.3 (xtend@4.0.0, readable-stream@1.0.33)
└── gulp-util@3.0.4 (array-differ@1.0.0, beeper@1.0.0, array-uniq@1.0.2, object-assign@2.0.0, lodash._reinterpolate@3.0.0, lodash._reescape@3.0.0, lodash._reevaluate@3.0.0, replace-ext@0.0.1, minimist@1.1.1, chalk@1.0.0, lodash.template@3.3.2, vinyl@0.4.6, multipipe@0.1.2, dateformat@1.0.11)
chapter2 $
</code></pre>

<p>在你的文件夹中会新增一个 <code>node_modules</code> 文件夹，这里面存放着 npm 安装的模块。</p>

<p>目录结构：</p>

<pre><code>├── gulpfile.js
└── node_modules
    └── gulp-uglify
</code></pre>

<p>接着输入 <code>gulp script</code> 执行任务</p>

<pre><code>gulp script
[13:34:57] Using gulpfile ~/Documents/code/gulp-book/demo/chapter2/gulpfile.js
[13:34:57] Starting 'script'...
[13:34:57] Finished 'script' after 6.13 ms
</code></pre>

<hr />

<p><strong>八、编写 js 文件</strong></p>

<p>我们发现 gulp 没有进行任何压缩操作。因为没有js这个目录，也没有 js 目录下的 <code>.js</code> 后缀文件。</p>

<p>创建 <code>a.js</code> 文件，并编写如下内容</p>

<pre><code>// a.js
function demo (msg) {
    alert('--------\r\n' + msg + '\r\n--------')
}

demo('Hi')
</code></pre>

<p>目录结构：</p>

<pre><code>├── gulpfile.js
├──  js
│   └── a.js
└── node_modules
    └── gulp-uglify
</code></pre>

<p>接着在命令行输入 <code>gulp script</code> 执行任务</p>

<p>gulp 会在命令行当前目录下创建 <code>dist/js/</code> 文件夹，并创建压缩后的 <code>a.js</code> 文件。</p>

<p>目录结构：</p>

<pre><code>├── gulpfile.js
├──  js
│   └── a.js
├──  dist
│   └── js
│       └── a.js
└── node_modules
    └── gulp-uglify
</code></pre>

<p><a href="https://github.com/nimojs/gulp-book/blob/master/demo/chapter2/dist/js/a.js">dist/js/a.js</a></p>

<pre><code class="language-js">function demo(n){alert(&quot;--------\r\n&quot;+n+&quot;\r\n--------&quot;)}demo(&quot;Hi&quot;);
</code></pre>

<hr />

<p><strong>九、检测代码修改自动执行任务</strong></p>

<p><code>js/a.js</code>一旦有修改 就必须重新在命令行输入 <code>gulp script</code> ，这很麻烦。</p>

<p>可以使用 <code>gulp.watch(src, fn)</code> 检测指定目录下文件的修改后执行任务。</p>

<p>在 <code>gulpfile.js</code> 中编写如下代码：</p>

<pre><code>// 监听文件修改，当文件被修改则执行 script 任务
gulp.watch('js/*.js', ['script']);
</code></pre>

<p>但是没有命令可以运行 <code>gulp.watch()</code>，需要将 <code>gulp.watch()</code> 包含在一个任务中。</p>

<pre><code>// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
    // 监听文件修改，当文件被修改则执行 script 任务
    gulp.watch('js/*.js', ['script'])
})
</code></pre>

<p>接着在命令行输入 <code>gulp auto</code>，自动监听 <code>js/*.js</code> 文件的修改后压缩js。</p>

<pre><code>$gulp auto
[21:09:45] Using gulpfile ~/Documents/code/gulp-book/demo/chapter2/gulpfile.js
[21:09:45] Starting 'auto'...
[21:09:45] Finished 'auto' after 9.19 ms
</code></pre>

<p>此时修改 <code>js/a.js</code> 中的代码并保存。命令行将会出现提示，表示检测到文件修改并压缩文件。</p>

<pre><code>[21:11:01] Starting 'script'...
[21:11:01] Finished 'script' after 2.85 ms
</code></pre>

<p>至此，我们完成了 gulp 压缩 js 文件的自动化代码编写。</p>

<p><strong>注意：</strong>使用 <code>gulp.watch</code> 后你的命令行会进入“运行”状态，此时你不可以在命令行进行其他操作。可通过 <code>Ctrl + C</code> 停止 gulp。</p>

<blockquote>
<p>Mac 下使用 <code>control + C</code> 停止 gulp</p>
</blockquote>

<p><strong>十、使用 gulp.task(&lsquo;default&rsquo;, fn) 定义默认任务</strong></p>

<p>增加如下代码</p>

<pre><code class="language-js">gulp.task('default', ['script', 'auto']);
</code></pre>

<p>此时你可以在命令行直接输入 <code>gulp</code> +回车，运行 <code>script</code> 和 <code>auto</code> 任务。</p>

<p>最终代码如下：</p>

<pre><code class="language-js">// 获取 gulp
var gulp = require('gulp')

// 获取 uglify 模块（用于压缩 JS）
var uglify = require('gulp-uglify')

// 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('script', function() {
    // 1. 找到文件
    gulp.src('js/*.js')
    // 2. 压缩文件
        .pipe(uglify())
    // 3. 另存压缩后的文件
        .pipe(gulp.dest('dist/js'))
})

// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
    // 监听文件修改，当文件被修改则执行 script 任务
    gulp.watch('js/*.js', ['script'])
})


// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 script 任务和 auto 任务
gulp.task('default', ['script', 'auto'])
</code></pre>

<p>去除注释后，你会发现只需要 11 行代码就可以让 gulp 自动监听 js 文件的修改后压缩代码。但是还有还有一些性能问题和缺少容错性，将在后面的章节详细说明。</p>

<p>你可以访问 <a href="https://github.com/terinjokes/gulp-uglify">gulp-uglify</a> 以查看更多用法。</p>
</article>
            <section class="author">
                
                <div class="avatar" style="background-image: url(https://pic1.58cdn.com.cn/nowater/webim/big/n_v2a9773b605e754c8493cf53ca8f5c0d7e.jpg);"></div>
                <a class="name" href="javascript:;">江矿先森.</a>
                <div class="intro">前(台)端(菜), 喜欢瞎折腾新技术. 乜野都识少少, 先可以扮代表.</div>
            </section>
            <section class="social">
                <a href="https://github.com/joname1" target="_blank">
                    <i class="iconfont i-github"></i>
                </a>
                <a href="javascript:alert('你电脑中了不知名的病毒, 并抛出了警告 atob(“d3hJZDogam9uYW1lLmxpYW5ndGFu”)')" target="_blank">
                    <i class="iconfont i-wechat"></i>
                </a>
                <a href="https://www.zhihu.com/people/joname-liangtan" target="_blank">
                    <i class="iconfont i-zhihu"></i>
                </a>
                <a href="javascript:alert('对方不想跟你讲话, 并向你扔来一段乱码 atob(“am9uYW1lLmxpYW5ndGFuQGdtYWlsLmNvbQ”)')" target="_blank">
                    <i class="iconfont i-email"></i>
                </a>
            </section>

            <div class="reward">
                <div class="reward-button">赏
                    <span class="reward-code">
                        <span class="alipay-code">
                            <img class="alipay-img wdp-appear" src="https://pic1.58cdn.com.cn/nowater/webim/big/n_v24d5eae197a764eb194b61e366ff263ba.jpg"><b>支付宝扫码</b>
                        </span>
                    <span class="wechat-code">
                            <img class="wechat-img wdp-appear" src="https://pic1.58cdn.com.cn/nowater/webim/big/n_v20ec7ae162f6a4219b8d0b429a2dbc9b3.jpg"><b>微信扫码</b>
                        </span>
                    </span>
                </div>
                
                <p class="reward-notice">如果文章对你有帮助, 扫上方二维码请我喝杯奶茶吧 :p</p>
            </div>

            <div id="comment"></div>
            
        </article>
    </article>
    <footer class="footer clearfix">
    <span class="copyright">
        <script>
            document.write(new Date().getFullYear());
        </script> <i class="fa fa-copyright"></i> Made with <i class="fa fa-heart"></i> using &ltjoname /&gt
        <span id="runtime_span"></span>
    </span>
</footer>
    <script src="/bundle/index.min.js"></script>
    <script src="https://cdn.staticfile.org/prism/1.16.0/prism.min.js"></script>
    <script>
        new Valine({el: '#comment',appId: 'PieJ3iHvVTJ9C5yBudK6sxaT-MdYXbMMI',appKey: 'Yt25unM4vc9wzBvC2lL20Frc',placeholder: 'ヾﾉ≧∀≦)o来啊, 快活啊, 反正有大把时光!!',path: window.location.pathname,avatar: 'retro',pageSize: 10,guest_info: ['nick', 'mail'],lang: 'en'});
    </script>
</body>

</html>